<template>
  <div>
    <div class="menu">
      <div class="logo">
        <img
          src='logo.png'
          alt=""
        />
      </div>
      <el-tabs
        v-model="activeName"
        class="nav"
        @tab-click="handleClick"
        size="medium "
      >
        <el-tab-pane label="首页" name="first"
          >
          <banner></banner>
          <Index></Index>
          <Foot></Foot>
        </el-tab-pane>

        

        <el-tab-pane label="书归校园" name="third">书归校园</el-tab-pane>
        <el-tab-pane label="校园合伙人 " name="information">校园合伙人</el-tab-pane>
        <el-tab-pane label="案例展示" name="fourth">案例展示</el-tab-pane>
        <el-tab-pane  name="second">
          <template #label> 
          <el-dropdown placement="bottom" @command="handleCommand">
            <span class="menu_nav" @click="gotopage('second')">关于书归</span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>书归简介</el-dropdown-item>
                    <el-dropdown-item>书归新闻</el-dropdown-item>
                    <el-dropdown-item>书归招聘</el-dropdown-item>
                    <el-dropdown-item>联系书归</el-dropdown-item>
                  </el-dropdown-menu>
            </template>
          </el-dropdown>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import banner from "./banner.vue";
import Index from "../main/index.vue";
import Foot from "../foot/footer.vue";
import router from "./route"
export default {
  
  data() {
    return {
      activeName: "first",
      color:''
    };
  },
  components: {
    banner,
    Index,
  },
  methods:{
    
  }
};
</script>
<style>
.menu_nav{
  font-size: 22px;
  color: #000;
}
.menu_nav:hover{
  color: #66b1ff;
}
.logo {
  width: 200px;
  position: absolute;
}
.logo img {
  height: 80px;
  display: block;
  margin: auto;
}
.menu {
  display: flex;
}
.el-tabs__header {
  margin: 0;
}
.el-tabs__active-bar {
  height: 4px;
}
.el-tabs__item {
  font-size: 22px;
  line-height: 80px;
  height: 80px;
  min-width: 128px;
  text-align: center;
}
.nav {
  margin: auto;
  font-size: 26px;
  flex: 1;
}
.el-tabs__nav {
  margin-left: 200px;
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>